<div *ngFor="let option of channelOptions$ | async; let i=index;">
  <app-detail-channel
    [imgUrl]="option.imgUrl"
    [channelName]="tplSwitch"
    [operationZone]="tplOperate"
    [columns]="option.channelColumns"
    [rowIndex]="i">
  </app-detail-channel>
  <ng-template #tplSwitch>
    <nz-switch
      *ngIf="option.checked; else unchecked"
      acl [acl-ability]="{ability: ['api.delete.zebra.store.one.channel', 'cil.custom.store.editable'], mode: 'allOf'}"
      [(ngModel)]="option.checked"
      [nzControl]="true"
      (click)="onRouteSwitchClick(option)"
      [nzLoading]="option.loading"></nz-switch>
    <ng-template #unchecked>
      <nz-switch
        acl [acl-ability]="{ability: ['api.post.zebra.store.one.channel', 'cil.custom.store.editable'], mode: 'allOf'}"
        [(ngModel)]="option.checked"
        [nzControl]="true"
        (click)="onRouteSwitchClick(option)"
        [nzLoading]="option.loading"></nz-switch>
    </ng-template>
  </ng-template>
  <ng-template #tplOperate>
    <app-rest-edit (edit)="onRouteEditClick(option)">
    </app-rest-edit>
  </ng-template>
</div>
